<template>
  <div class="">
    <myhead>装修方案</myhead>
    <!--装修方案详情页内容 -->
    <div class="zxcontent">
      <ul>
        <li>
          <div class="left">
            <img
              src="http://img.sirfang.com/effect_img/2020/10/19/d0a30c3a26e2f1de5480c5961036d0b2.jpg"
              alt=""
            />
          </div>
          <div class="right">
            <h3>699全包精装套餐</h3>
            <p>
              <span>价格: <b style="color: #ff4953">￥699元/m²</b></span>
            </p>
            <p>已预约：<span style="color: black">221套</span></p>
            <p>
              正式发售：<span style="color: #fe8a67">全包套餐火爆预约中</span>
            </p>
          </div>
          <div class="bottom">
            <p>
              精装全包套餐 包设计/包注册/包施工/报监理 采取知名辅材一线主材
              工厂直供f2c模式
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!--装修方案导航栏 -->
    <div class="zxnav">
      <ul>
        <li
          v-for="(item, i) in nav"
          :key="i"
          @click="flag = i"
          :class="i == flag ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="contentnav">
      <ul>
        <li
          v-for="(item, i) in contentnav"
          :key="i"
          @click="cflag = i"
          :class="i == cflag ? 'cactive' : ''"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!--装修方案表格 -->
    <div>
      <table>
        <thead>
          <tr>
            <th>项目</th>
            <th>备注</th>
            <th>详细说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>双面生态门套</td>
            <td>佳梦圆、金美森</td>
            <td>含木质基层</td>
          </tr>
          <tr>
            <td>隔断金属移门</td>
            <td>梵立欧</td>
            <td>单玻、八方格双移门；可选单开实木复合生态门</td>
          </tr>
          <tr>
            <td>橱柜配套水槽套装（含龙头）</td>
            <td>金亿</td>
            <td>含水槽、水槽龙头及下水</td>
          </tr>
          <tr>
            <td>整体橱柜</td>
            <td>金亿</td>
            <td>
              上柜2.4米、下柜4.5米；含石英石台面和柜门；含配套拉手、铰链、拉篮
            </td>
          </tr>
          <tr>
            <td>集成吊顶配灯LED</td>
            <td>路易华登</td>
            <td>1个</td>
          </tr>
          <tr>
            <td>集成吊顶</td>
            <td>宝得龙</td>
            <td>面积不限</td>
          </tr>
          <tr>
            <td>大理石门槛石</td>
            <td>育才</td>
            <td>黑白根或雅士白二选一，长度不限</td>
          </tr>
          <tr>
            <td>包水管及抹灰</td>
            <td></td>
            <td>限1处、并排3根管以内</td>
          </tr>
          <tr>
            <td>地砖300*300</td>
            <td>斯奇、凤之凰</td>
            <td>面积不限，含正铺贴及人工辅料</td>
          </tr>
          <tr>
            <td>墙砖300*600</td>
            <td>斯奇、凤之凰</td>
            <td>面积不限，含正铺贴</td>
          </tr>
        </tbody>
      </table>
    </div>
    <myfoot />
  </div>
</template>

<script>
import myhead from "../components/Myhead.vue";
import myfoot from '../components/Myfoot.vue'
export default {
  data() {
    return {
      nav: ["套餐详情", "配置清单", "施工工艺", "服务流程"], //导航栏
      flag: 1, //导航栏选中的是那个
      contentnav: ["厨房", "卫生间", "阳台", "卧室/客房 ", "客厅"], //内容导航栏
      cflag: 0, //内容导航栏选中的是那个
    };
  },
  mounted() {},
  methods: {},
  components: {
    myhead,
    myfoot
  },
};
</script>

<style lang='scss' scoped>
//装修内容
.zxcontent {
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  ul {
    li {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 10px;
      .left {
        flex-basis: 40%;
      }
      .right {
        flex-basis: 60%;
        flex-direction: column; //flex侧轴对齐
        text-align: left;
        h3 {
          font-size: 18px;
          margin-left: 10px;
        }
        p {
          color: #999;
        }
      }
    }
  }
}
//装修导航栏
.zxnav {
  margin-top: 10px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
  .active {
    border-bottom: 2px solid #37c794;
  }
  ul {
    display: flex;
    padding-top: 10px;
    box-sizing: border-box;
    li {
      flex-basis: 25%;
      text-align: center;
      height: 30px;
      line-height: 30px;
      border-right: 1px solid #ccc;
    }
  }
}
//装修内容导航栏
.contentnav {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
  .cactive {
    background-color: #37c794;
    color: #fff;
  }
  ul {
    display: flex;
    padding: 13px;
    box-sizing: border-box;
    li {
      flex-basis: 20%;
      text-align: center;
      height: 34px;
      line-height: 34px;
      border-radius: 16px;
      // font-size: 14px;
      border: 1px solid #37c794;
      margin-left: 12px;
      color: #37c794;
    }
  }
}
//装修方案表格
table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  color: #ccc;
  th {
    color: #2bb281;
  }
  th {
    border-top: 1px solid #eaeaea;
    text-align: left;
  }
  th,
  td {
    line-height: 1.8;
    border-bottom: 1px solid #eaeaea;
    padding: 2px 5px;
    border-right: 1px solid #eaeaea;
  }
}
</style>
